<template>
	<view class="insurecontent">
		<view class="insurecontentbox">
			<view class="boxtitle">
				<view class="boxtitletext">活动信息</view>
				<view class="boxtitlebg"></view>
			</view>
			<view class="boxcontent">
				<view class="boxcontentleft">研学机构名称</view>
				<view class="boxcontentright">{{optionInfo.deptName}}</view>
			</view>
			<view class="boxcontent">
				<view class="boxcontentleft">研学活动</view>
				<view class="boxcontentright">{{optionInfo.subInsureOrganName}}</view>
			</view>
		</view>
		<view class="insurecontentbox">
			<view class="insurecontentbox1">
				<view class="boxtitle boxtitle1">
					<view class="boxtitletext">家长信息</view>
					<view class="boxtitlebg"></view>
				</view>
			</view>
			<!-- 表单 -->
			<view class="">
				<!-- 家长信息 -->
				<u--form labelWidth='95' labelPosition="left" :model="parentList">
					<u-form-item label="家长姓名" borderBottom>
						<u--input disabled v-model="parentList.realName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="家长电话" borderBottom>
						<u--input disabled v-model="parentList.phoneNubmer" border="none"></u--input>
					</u-form-item>
					<u-form-item label="家长身份证号" borderBottom>
						<u--input disabled v-model="parentList.docNumber" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view style="margin-top: 30rpx;" class="insurecontentbox1">
					<view class="boxtitle boxtitle1">
						<view class="boxtitletext">学生信息</view>
						<view class="boxtitlebg"></view>
					</view>
				</view>
				<!-- 孩子信息 -->
				<u--form v-for="(item,index) in childList" :key="index" labelWidth='95' labelPosition="left"
					:model="item">
					<u-form-item label="学生姓名" borderBottom>
						<u--input disabled v-model="item.realName" border="none"></u--input>
					</u-form-item>
					<u-form-item  label="与家长关系" borderBottom>
						<u--input disabled v-model="item.relation" border="none"></u--input>
					</u-form-item>
					<u-form-item label="学生身份证号" borderBottom>
						<u--input disabled v-model="item.docNumber" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="insurecontentbox">
			<view class="insurecontentbox1">
				<view class="boxtitle boxtitle1">
					<view class="boxtitletext">投保信息</view>
					<view class="boxtitlebg"></view>
				</view>
			</view>
			<view class="">
				<!-- 投保信息 -->
				<u--form :model='optionInfo' labelWidth='95' labelPosition="left">
					<u-form-item label="投保人" borderBottom>
						<u--input disabled v-model="optionInfo.deptName" border="none"></u--input>
					</u-form-item>
					<u-form-item  label="被保险人" borderBottom>
						<u--input disabled v-model="optionInfo.realName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="保险人" borderBottom>
						<u--input disabled v-model="realNameList.subInsureOrganName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="投保方案" borderBottom>
						<u--input disabled v-model="optionInfo.phoneNubmer" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="insurecontentbox">
			<view class="insurecontentbox1">
				<view class="boxtitle boxtitle1 boxtitlel">
					<view class="boxtitletext">投保方案详情</view>
					<view class="boxtitlebg boxtitlebg1"></view>
				</view>
			</view>
			<view v-for="(item,index) in insureList" class="infomony">
				<view class="infomony1">{{item.detailTitle}}</view>
				<image class="infomony2" src="../../static/images/home/警告 拷贝@2x.png" mode=""></image>
				<view class="infomony3">{{item.detailFee}}元</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		historyDetails,detailsList
	} from '../../api/login.js'
	export default {
		data() {
			return {
				parentList: {
					docNumber: "", //家长身份证
					phoneNubmer: "", //家长手机号
					realName: "", //家长名字
					belongId: '', //活动id
					belongType: "02", //默认值
					participantType: "0", //0家长
					relation: "0", //家长默认关系值
					docType: "01", //默认身份证
					isAuthorized: "1", //通知书授权
				},
				childList: [{
					docNumber: "", //孩子身份证
					phoneNubmer: "", //孩子手机号
					realName: "", //孩子名字
					belongId: 1, //活动id
					belongType: "02", //默认值
					participantType: "1", //1孩子
					relation: "", //与父母默认关系值
					docType: "01", //默认身份证
					isAuthorized: "1", //通知书授权
					relationship: '请选择'
				}, ],
				optionInfo:{},
				insureList:{},
				realNameList:{}
				

			}
		},
		mounted() {
			this.info()
		},
		methods: {
			info(){
				this.realNameList=[]
				//  研学活动登记历史详情-人员列表  详情页面调用
				 historyDetails({belongId:this.optionInfo.activityId}).then(res => {
					 this.parentList=res.rows[0].parent
					 this.childList=res.rows
					  let obj = {};
					 this.childList.forEach((item,index)=>{
						 this.realNameList.push(item.realName)
						 obj[index] = item;
					 })
					 this.realNameList=obj
				// 	// parentRealName => 家长姓名
				// 	// createTime => 提交时间 截取日期就可以
				// 	// activityTitle =>对应峰光研学 另外需要传递给详情页面展示
				// 	// subInsureOrganName  =>对应成都市峰光文化旅游有限公司 另外需要传递个详情页面展示
				// 	// activityId => 对应详情接口需要传递的belongId参数
					console.log(res) 
				})
				// 研学活动登记历史详情-保险责任列表
				// planCode 查询wxJoinActivityHistory接口里面返回的insurePlanCode 参数
				detailsList({insurePlanCode:this.optionInfo.insurePlanCode}).then(res=>{
					this.insureList=res.rows
					console.log(res)
				})
			}
		},
		// id
		onLoad: function(option) {
this.optionInfo=option
		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	.insurecontent {
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-color: #F5F8FA;
	}

	.insurecontentbox {
		width: 92%;
		// height: 186rpx;
		background-color: #fff;
		margin-top: 15rpx;
		padding: 4%;
	}

	.boxtitle {
		position: relative;
		width: 135rpx;
		height: 38rpx;
	}

	.boxtitletext {
		font-size: 31rpx;
		color: #333333;
		line-height: 33rpx;
		font-weight: bold;
	}

	.boxtitlebg {
		width: 135rpx;
		height: 21rpx;
		background: #5098E1;
		opacity: 0.15;
		position: absolute;
		bottom: 0;
	}

	.boxcontent {
		margin-top: 20rpx;
		width: 100%;
		height: 30rpx;
	}

	.boxcontentleft {
		float: left;
		font-size: 25rpx;
		color: #000000;
		line-height: 38rpx;
	}

	.boxcontentright {
		float: right;
		font-size: 25rpx;
		color: #000000;
		line-height: 38rpx;
		font-weight: bold;
	}

	.insurecontentbox1 {
		width: 100%;
		height: 40rpx;
	}

	.boxtitle1 {
		float: left;
	}

	.insurecontent /deep/.u-form-item__body__left__content__label {
		color: #666666;
	}
	.boxtitlel{
		width: 190rpx;
	}
	.boxtitlebg1{
		width: 190rpx;
	}
	.infomony{
		height: 70rpx;
		width: 100%;
		line-height: 70rpx;
		overflow: hidden;
	}
	.infomony1{
		font-size: 25rpx;
		color: #000000;
		display: inline-block;
		float: left;
	}
	.infomony2{
		width: 25rpx;
		height: 25rpx;
		margin-top: 19rpx;
		margin-left: 8rpx;
		float: left;
		display: inline-block;
	}
	.infomony3{
		font-size: 28rpx;
		color: #666666;
		
		display: inline-block;
		float: right;
	}
</style>